
<div class='title'>1.Jet生命周期函数</div>
<div class="sub">
    <div class='text'>
        Jet 有以下9个生命周期函数，各自的执行先后顺序与其序号一致。
        <div class='list'>
            <div>1.beforeinit：<span class="light-text">(在生成Jet元素和渲染HTML元素之前执行)</span></div>
            <div>2.beforemount：<span class="light-text">(在生成Jet元素和之后、渲染HTML元素之前执行)</span></div>
            <div>3.onmounted：<span class="light-text">(在渲染HTML元素完成之后执行)</span></div>
            <div>4.onroute：<span class="light-text">(在路由发生之前执行，在组件卸载之后会被移除，如果要使全局可用，请在根Jet中使用或者使用Jet.router.onroute())</span></div>
            <div>5.onrouted：<span class="light-text">(在路由完成之后执行，在组件卸载之后会被移除，如果要使全局可用，请在根Jet中使用或者使用Jet.router.onrouted())</span></div>
            <div>6.beforeunmount<span class="light-text">(在组件卸载之前执行)</span></div>
            <div>7.onunmounted<span class="light-text">(在组件卸载之后执行（组件卸载之后Jet中对应的对象会被清除）)</span></div>
            <div class='link' jump-to='ondatachange'>8.ondatachange：(用于监测 Jet data 数据改变，并且执行对应的回调函数)<i class="icon icon-double-angle-right"></i></div>
            <div class='link' jump-to='beforeinitawait'>9.beforeinitawait(beforeinit的同步方法，主要用于在渲染之前保证一些异步操作执行完毕，如加载模块等)<i class="icon icon-double-angle-right"></i></div>
        </div>
        但是，只有在根Jet元素中才会触发所有的生命周期函数。
        在非根Jet元素中刷新页面时，不会触发其onroute函数：
        生命周期函数用法如下：
    </div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;script>
    new Jet({
        onroute:function(){
            console.log('onroute');
        },
        beforeinit:function(){
            console.log('beforeinit');
        },
        beforemount:function(){
            console.log('beforemount');
        },
        onready:function(){
            console.log('onready');
        },
        onload:function(){
            console.log('onload');
        },
        onmounted:function(){
            console.log('onmounted');
        },
        onrouted:function(){
            console.log('onrouted');
        },
        beforeunmount:function(){
            console.log('beforeunmount');
        },
        onunmounted:function(){
            console.log('onunmounted');
        },
    });
&lt;/script>
    </div>
</div>

<div class='title' jump-des='ondatachange'>2.ondatachange 详解</div>
<div class="sub">
    <div class='text'>
        ondatachange 属性用于为Jet数据添加一个数据变化的监听事件，事件方法的 this 指代的是根Jet元素，方法有一个json类型的参数，其中包含的属性入下。
    </div>
    <pre>
opt={
    value:'',//表示改变之后的值
    key:'',//表示值的键或索引
    index:[],//一个包含索引的数组，如果是多层数组，这个数组就是每层索引组成的数组
    set:function,//这个是一个函数，可以调用它来设置数据，使用时需要谨慎，以防止出现无限循环的情况。
    path:'',//完整的属性或索引路径
}
    </pre>
    <div class='title'>a.字符串形式</div>
    <div class='text'>
        使用字符串形式时 ondatachange 中的键值对都是字符串和函数类型，直接使用表达式来表示某一个变量，请看一个例子：
    </div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div>输入以改变数据值&lt;/div>
&lt;div>字符串类型(值类型)：&lt;input type="text" j='string'>&lt;/div>
&lt;div j='json'>json：&lt;input type="text" j='key'>&lt;/div>
&lt;div j='array'>数组[&lt;span j='$index'>&lt;/span>]：&lt;input type="text" j='$value'>&lt;/div>
&lt;script>
    new Jet({
        data:{//数据
            string:'hello word',
            json:{
                key:'value'
            },
            array:[0,1]
        },
        ondatachange:{
            'string':function(d){
                JUI.msg('string:'+d.key+"--"+d.value);
            },
            'json.key':function(d){
                JUI.msg('json:'+d.key+"--"+d.value);
            },
            'array[0]':function(d){
                JUI.msg('array:'+d.key+"--"+d.value);
            },
            'array[1]':function(d){
                JUI.msg('array:'+d.key+"--"+d.value);
            },
        }
    });
&lt;/script>
    </div>
    <div class='text'>以下是输出的html:
        <div class='out'>
            <div>输入以改变数据值</div>
            <div>字符串类型(值类型)：<input type="text" j='string'></div>
            <div j='json'>json：<input type="text" j='key'></div>
            <div j='array'>数组[<span j='$index'></span>]：<input type="text" j='$value'></div>
        </div>
    </div>
    <div class='title'>b.json嵌套形式</div>
    <div class='text'>
        也可以像jet data一样设置ondatachange。对于json和数组类型，可以使用 $func 属性来监测自身的数据改变。
        对于数组类型，必须使用 $each 属性来监测元素的数据改变。请看一个例子
    </div>
    <div class='text'>
        当使用json嵌套形式时，所有的事件方法都有三个参数，第一个是值，第二个是键，第三个是一个索引数组，表示包含当前数据的数组的索引列表，多层数组嵌套时第一个元素是最外层的索引，最后一个元素是最内层的索引。
    </div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div>输入以改变数据值&lt;/div>
&lt;div j='json2'>json：
    &lt;span j='key'>
        &lt;input type="text" j='k'/>
    &lt;/span>
&lt;/div>
&lt;div j='array2'>
    数组[&lt;span j='$index'>&lt;/span>]：
    &lt;span>
        a1:&lt;input type="text" j='a1'/>
        a2&lt;input type="text" j='a2'/>
    &lt;/span>
&lt;/div>
数组嵌套：
&lt;div j='array3'>
    &lt;div j='$each'>
        &lt;div j='$each'>
            &lt;span j='$index(1)'>&lt;/span>-
            &lt;span j='$index'>&lt;/span>:
            &lt;input type="text" j='$value'/>
        &lt;/div>
    &lt;/div>
&lt;/div>
&lt;script>
    new Jet({
        data:{//数据
            json2:{
                key:{
                    k:'value'
                }
            },
            array2:[
                {a1:'1',a2:2},
                {a1:'1',a2:2}
            ],
            array3:[[11,12],[21,22]]
        },
        ondatachange:{
            json2:{
                $func:function(d){
                    JUI.msg('json2:'+d.key+"--"+d.value);
                },
                key:{
                    $func:function(d){
                        JUI.msg('key:'+d.key+"--"+JSON.stringify(d.value));
                    },
                    k:function(d){
                        JUI.msg('k:'+d.key+"--"+d.value);
                    }
                },
            },
            array2:{
                $func:function(d){
                    JUI.msg('array2:'+d.key+"--"+d.value);
                },
                $each:{
                    $func:function(d){
                        JUI.msg('each:'+d.key+"--"+d.value);
                    },
                    a1:function(d){
                        //index 是元素索引的数组，多层数组嵌套时第一个元素是最外层的索引，最后一个元素是最内层的索引
                        JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    },
                    a2:function(d){
                        JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    },
                },
            },
            array3:{
                $func:function(d){
                    JUI.msg('array3:'+d.key+"--"+d.value);
                },
                $each:{
                    $func:function(d){
                        JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    },
                    $each:{
                        $func:function(d){
                            JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                        },
                    }
                    // 或者使用
                    // $each:function(d){
                    //     JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    // }
                }
            }
        }
    });
&lt;/script>
    </div>
    <div class='text'>以下是输出的html:
        <div class='out'>
            <div>输入以改变数据值</div>
            <div j='json2'>json：
                <span j='key'>
                    <input type="text" j='k'/>
                </span>
            </div>
            <div j='array2'>
                数组[<span j='$index'></span>]：
                <span>
                    a1:<input type="text" j='a1'/>
                    a2<input type="text" j='a2'/>
                </span>
            </div>
            数组嵌套：
            <div j='array3'>
                <div j='$each'>
                    <div j='$each'>
                        <span j='$index(1)'></span>-
                        <span j='$index'></span>:
                        <input type="text" j='$value'/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class='title' jump-des='beforeinitawait'>9.beforeinitawait</div>
<div class="sub">
    <div class='text indent'>
        beforeinitawait 方法是 beforeinit 的同步版本，主要用于在渲染之前保证一些异步操作执行完毕，如加载模块等。
    </div>
    <div class='text indent'>
        若 beforeinitawait 和 beforeinit 同时存在，Jet 只会选择执行一个，且优先选择 beforeinit。
    </div>
    <div class='text indent'>
        使用该方法会阻塞 Jet 渲染。该方法支持一个回调参数，是一个function类型的参数，在手动调用该方法以后，Jet 才会继续渲染。 请看一个例子
    </div>
    <div class='j-code not-test' disabled width='99%' height='auto'>
&lt;script> 
new Jet({
    beforeinitawait:function(next){
        Jet.import('name',function(){
            next();
        })
    }
})
&lt;/script>
    </div>
</div>
    

<script>
    new Jet({

        data:{//数据
            string:'hello word',
            json:{
                key:'value'
            },
            array:[0,1],
            json2:{
                key:{
                    k:'value'
                }
            },
            array2:[{a1:'1',a2:2},{a1:'1',a2:2}],
            array3:[[11,12],[21,22]]
        },
        ondatachange:{
            'string':function(d){
                JUI.msg('string:'+d.key+"--"+d.value);
            },
            'json.key':function(d){
                JUI.msg('json:'+d.key+"--"+d.value);
            },
            'array[0]':function(d){
                JUI.msg('array:'+d.key+"--"+d.value);
            },
            'array[1]':function(d){
                JUI.msg('array:'+d.key+"--"+d.value);
            },
            json2:{
                $func:function(d){
                    JUI.msg('json2:'+d.key+"--"+d.value);
                },
                key:{
                    $func:function(d){
                        JUI.msg('key:'+d.key+"--"+JSON.stringify(d.value));
                    },
                    k:function(d){
                        JUI.msg('k:'+d.key+"--"+d.value);
                    }
                },
            },
            
            array2:{
                $func:function(d){
                    JUI.msg('array2:'+d.key+"--"+d.value);
                },
                $each:{
                    $func:function(d){
                        JUI.msg('each:'+d.key+"--"+d.value);
                    },
                    a1:function(d){
                        //index 是元素索引的数组，多层数组嵌套时第一个元素是最外层的索引，最后一个元素是最内层的索引
                        JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    },
                    a2:function(d){
                        JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    },
                },
            },
            array3:{
                $func:function(d){
                    JUI.msg('array3:'+d.key+"--"+d.value);
                },
                $each:{
                    $func:function(d){
                        JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    },
                    $each:{
                        $func:function(d){
                            JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                        },
                    }
                    // 或者使用
                    // $each:function(d){
                    //     JUI.msg(d.index.toString()+':'+d.key+"--"+d.value);
                    // }
                }
            }
            
        },
        func:{
            //函数
        }
    });
</script>